<template>
	<view style="width: 100%;display: flex;flex-direction: column;">
		<view
			style="width: 100%;display: flex;justify-content: center;color: #d3d3d3;font-size: 20rpx;margin-top: 20rpx;"
			v-if="index%8 == 0">
			{{$u.timeFormat(infox.time, 'mm-dd hh:MM:ss')}}
		</view>
		<view v-if="$store.state.user.user.id != infox.uid" style="width: 100%;display: flex;padding: 15rpx;">
			<u-avatar @click="gofriend" mode="square" size="80"
				:src="$store.state.common.systemInfo.fileurl + 'avatar/' + info.uid + '.jpg'"></u-avatar>
			<view style="width: 100%;display: flex;">
				<view style="margin-left: 15rpx;">
					
				</view>
				<view  v-if="infox.status == '领取中' || infox.status == '正常'" @click="getredm"
					style="width: 350rpx;display: flex;flex-direction: column;background: white;background: #ff6b15;border-radius: 12rpx;">
					<view
						style="width: 350rpx;display: flex;flex-wrap: wrap;white-space: pre-wrap;border-radius: 8rpx;background: #ff6b15;align-items: center;padding: 15rpx;padding-bottom: 0rpx;justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<image src="/static/images/rred.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
							<view style="display: flex;flex-direction: column;margin-left: 6rpx;">
								<view class="u-line-1" style="width: 240rpx;color: white;">
									{{infox.content?infox.content:'恭喜发财'}}
								</view>
							</view>
						</view>
					</view>
					<view
						style="width: 100%;padding-left: 20rpx;font-size: 20rpx;color: #ff9513;padding: 6rpx;border-top: 1rpx solid #ff8f1e;margin-top: 6rpx;">
						<view style="margin-left: 10rpx;">
							红包
						</view>
					</view>
				</view>
				
				<view v-else @click="gogetredm"
					style="width: 350rpx;display: flex;flex-direction: column;background: white;background: #ffa12e;border-radius: 12rpx;">
					<view
						style="width: 350rpx;display: flex;flex-wrap: wrap;white-space: pre-wrap;border-radius: 8rpx;background: #ffa12e;align-items: center;padding: 15rpx;padding-bottom: 0rpx;justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<image src="/static/images/redfns.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
							<view style="display: flex;flex-direction: column;margin-left: 6rpx;">
								<view class="u-line-1" style="width: 240rpx;color: white;">
									{{infox.content?infox.content:'恭喜发财'}}
								</view>
							</view>
						</view>
					</view>
					<view
						style="width: 100%;padding-left: 20rpx;font-size: 20rpx;color: #ffbd37;padding: 6rpx;border-top: 1rpx solid #ffb640;margin-top: 6rpx;">
						<view style="margin-left: 10rpx;">
							红包
						</view>
					</view>
				</view>
				
			</view>
		</view>

		<view v-else style="width: 100%;display: flex;padding: 15rpx;flex-direction: row-reverse;" @click="gogetredm">

			<u-avatar mode="square" size="80"
				:src="$store.state.common.systemInfo.fileurl + 'avatar/' + info.uid + '.jpg'"></u-avatar>
			<view style="width: 100%;display: flex;justify-content: flex-end;">
				<view v-if="infox.status == '领取中' || infox.status == '正常'" style="width: 350rpx;display: flex;flex-direction: column;background: #ff6b15;border-radius: 12rpx;">
					<view
						style="width: 350rpx;display: flex;flex-wrap: wrap;white-space: pre-wrap;border-radius: 8rpx;background: #ff6b15;align-items: center;padding: 15rpx;padding-bottom: 0rpx;justify-content: space-between;">
						<view style="display: flex;align-items: center;padding: 5rpx;">
							<image src="/static/images/rred.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
							<view style="display: flex;flex-direction: column;margin-left: 6rpx;">
								<view class="u-line-1" style="width: 240rpx;color: white;">
									{{infox.content?infox.content:'恭喜发财'}}
								</view>
							</view>
						</view>
					</view>
					<view
						style="width: 100%;padding-left: 20rpx;font-size: 16rpx;color: #ff9513;padding: 6rpx;border-top: 1rpx solid #ff8f1e;margin-top: 6rpx;">
						<view style="margin-left: 10rpx;">
							红包
						</view>
					</view>
				</view>
				<view v-else style="width: 350rpx;display: flex;flex-direction: column;background: #ffa12e;border-radius: 12rpx;">
					<view
						style="width: 350rpx;display: flex;flex-wrap: wrap;white-space: pre-wrap;border-radius: 8rpx;background: #ffa12e;align-items: center;padding: 15rpx;padding-bottom: 0rpx;justify-content: space-between;">
						<view style="display: flex;align-items: center;padding: 5rpx;">
							<image src="/static/images/redfns.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
							<view style="display: flex;flex-direction: column;margin-left: 6rpx;">
								<view class="u-line-1" style="width: 240rpx;color: white;">
									{{infox.content?infox.content:'恭喜发财'}}
								</view>
							</view>
						</view>
					</view>
					<view
						style="width: 100%;padding-left: 20rpx;font-size: 16rpx;color: #ffbd37;padding: 6rpx;border-top: 1rpx solid #ffb640;margin-top: 6rpx;">
						<view style="margin-left: 10rpx;">
							红包
						</view>
					</view>
				</view>
				<view style="margin-right: 15rpx;">
					
				</view>
			</view>
		</view>
		
		<u-popup v-model="showgetr" mode="center" border-radius="12">
			<view style="width: 560rpx;display: flex;flex-direction: column;align-items: center;background: linear-gradient(to bottom,#b43737,#b11409);border-radius: 12rpx;">
				<view style="margin-top: 100rpx;">
					<u-avatar mode="square" :src="$store.state.common.systemInfo.fileurl + 'avatar/' + infox.uid + '.jpg'" size="46"></u-avatar>
				</view>
				<view style="margin-top: 15rpx;color: #ffd36a;">
					{{infox.name}}的红包
				</view>
				<view style="margin-top: 20rpx;color: #ffd28a;font-size: 46rpx;">
					{{infox.content?infox.content:'恭喜发财'}}
				</view>
				<view @click="getredmcon" style="margin-top: 300rpx;margin-bottom: 100rpx;background: #ffd36a;display: flex;align-items: center;justify-content: center;width: 140rpx;height: 140rpx;border-radius: 70rpx;font-size: 40rpx;font-weight: bold;color: #7e6c10;">
					收
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		pub, sub
	} from '@/common/event';
	import moment from 'moment';
	export default {
		data() {
			return {
				infox: {},
				showgetr:false
			}
		},
		mounted() {
			this.infox = this.info
			sub(`socket_redpacketchange_${this.infox.id}`,(e)=>{
				this.infox.status = e.status
				this.infox.logids = e.logids
			})
			this.getdata()
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			index: {
				type: Number,
				default: 0
			}
		},
		computed: {
			...mapState({
				list: (state) => {

				}
			})
		},
		methods: {
			getdata:async function(){
				const user = this.$store.state.user.user
				const ret = await this.$u.post(`bgyx/bgyx/getdata/redgetlog`,{
					where:{
						uid:user.id,
						mid:this.info.id
					}
				})
				if(ret && ret.success && ret.data && ret.data.length > 0){
					this.infox.content = "已领取"
				}
			},
			getredm: async function() {
				const user = this.$store.state.user.user
				const ret = await this.$u.post(`bgyx/bgyx/getdata/redgetlog`,{
					where:{
						uid:user.id,
						mid:this.info.id
					}
				})
				if(ret && ret.success && ret.data && ret.data.length > 0){
					this.gogetredm()
					return
				}
				this.showgetr = true
			},
			getredmcon: async function() {
				this.showgetr = false
				const ret = await this.$u.post(`chat/chat/getgredm/${this.info.id}`)
				if(ret && ret.success && ret.data){
					this.$store.commit(`user/setUserData`,{
						money:ret.data
					})
					uni.navigateTo({
						url:"/pages/friend/usergetredlog?id="+this.infox.id
					})
				}else{
					this.gogetredm()
				}
			},
			gogetredm:function(){
				uni.navigateTo({
					url:"/pages/friend/usergetredlog?id="+this.info.id
				})
			},
			gofriend:function(){
				const list = this.$store.state.friend.list
				const user = this.$store.state.user.user
				const ret = list.find(e=>{
					return e.fid == this.info.uid
				})
				if(ret){
					uni.navigateTo({
						url:"/pages/friend/detail?id="+this.info.uid
					})
				}else{
					uni.navigateTo({
						url:"/pages/friend/friend?id="+this.info.uid
					})
				}
			},
		}
	}
</script>

<style>
</style>